<template>
    <div>

        <h1>房号信息显示</h1>
        <br>
        <a href="/add">房号添加</a>
        <br>
        <input type="text" placeholder="房号查询" v-model="page.house">
        <input type="text" placeholder="房号创建人查询" v-model="page.name">
        <input type="button" value="查询" @click="chax">
        <table class="table">
            <thead>
               <tr>
                  <td>房号id</td>
                  <td>房号</td>
                  <td>房号创建人</td>
                  <td>状态</td>
                  <td>图片</td>
                  <td>状态修改</td>
               </tr>
            </thead>
            <tbody>
               <tr v-for="e in data">
                  <td>{{ e.id }}</td>
                  <td>{{ e.houseNum }}</td>
                  <td>{{ e.houseName }}</td>
                  <td>{{ e.state?'启用':'禁用' }}</td>
                  <td><img :src="'https://localhost:7145/'+e.imgUrl" style="height: 60px; width: 60px;"></td>
               <td><input type="button" :value="e.state?'禁用':'启用'" @click="upstate(e.id)"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import { useRouter,useRoute } from 'vue-router'

const router=useRouter();
const route=useRoute();

const chax=()=>{
    show();
}

onMounted(()=>{
    show()
})
const data= ref([{
    "id": 1,
    "houseNum": "1001",
    "houseName": "张三",
    "state": true,
    "imgUrl": "string"
}])

const page=ref({
    house:"",
    name:"",
})

const show =()=>{
    axios.get("/api/House/ShowHouse",{params:page.value}).then(res=>{
        data.value=res.data
    })
}

const upstate=(val:any)=>{
    if(!confirm("确认修改状态吗"))
{
    return;
}
   axios.get("/api/House/UpdateHouse",{params:{id:val}}).then(res=>{
    if(res.data>0)
   {
       alert("状态修改成功")
       show();
   }
   else{
         alert("状态修改失败");
         return;
   }
   })
}


</script>

<style scoped>

</style>